<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模糊搜索</title>
</head>

<body>
    <div class="root">
        <input type="text" v-model="val">
        <ul>
            <li v-for="(item, index) in list" :key="index" v-text=item.name></li>
        </ul>
        <hr>
        <p>
            条件1<input type="text" v-model="valName">
        </p>
        <p>
            条件2<input type="text" v-model="valXi">
        </p>
        <ul>
            <li v-for="(item, index) in list1" :key="index" v-text=item.name+item.xi></li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
        // let arr = [
        //     { id: 1, name: '小羊肖恩' },
        //     { id: 2, name: '小鲤鱼泡泡' },
        //     { id: 3, name: '深海鳗鱼' },
        //     { id: 4, name: '派大星' },
        //     { id: 5, name: '鲸鱼' },
        // ]
        let arr = [
            { id: 1, name: 'axc', xi: 1 },
            { id: 2, name: 'avv', xi: 4 },
            { id: 3, name: 'sxc', xi: 5 },
            { id: 4, name: 'xcc', xi: 2 },
            { id: 5, name: 'vaa', xi: 3 },
        ]
        Mock.mock(RegExp('xxx/nnn' + '*.'), 'get', req => {
            console.log(req);
            // console.log(req.url.split('=')[1].split('&')[0]);
            // console.log(req.url.split('=')[2]);

            let name = req.url.split('=')[1];
            let valName = req.url.split('=')[1].split('&')[0];
            let valXi = req.url.split('=')[2];
            // console.log(!name.includes('&'));
            if (!name.includes('&')) {
                return arr.filter(r => {
                    return r.name.includes(name);
                })

            }
            if (valXi) {
                let arr1 = arr.filter(q => q.name.includes(valName));
                console.log(arr1);
                let arr2 = arr1.filter(s => {
                    return s.xi == valXi
                })
                console.log(arr2);
                return arr2;

            }
        })

        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        //创建vue实例
        new Vue({
            el: '.root',
            data: function () {
                return {
                    val: '',
                    valName: '',
                    valXi: '',
                    list: [],
                    list1: [],
                }
            },
            watch: {
                val: {
                    handler() {
                        axios.get('xxx/nnn', {
                            params: {
                                val: this.val,
                            },
                        }).then(res => {
                            console.log(res);
                            this.list = res.data;
                            console.log(this.list);
                        })
                    }
                },
                valXi: {
                    handler() {
                        axios.get('xxx/nnn', {
                            params: {
                                valName: this.valName,
                                valXi: this.valXi,
                            },
                        }).then(res => {
                            console.log(res);
                            this.list1 = res.data;
                            console.log(this.list1);
                        })
                    }
                }
            }
        })
    </script>
    <script>
        // 练习mock
        // Mock.mock('/kk/aas', 'get', {
        //     'data|50': [
        //         {
        //             'id|+1': 1,
        //             name: '@ctitle',
        //             img:'@Image(11)',
        //             'sex|0-1':0,
        //         }
        //     ]
        // });
        // axios.get('/kk/aas').then(res => {
        //     console.log(res);
        // })

        // Mock.mock(RegExp('/kk/aas'+'*.'),'get',req=>{
        //    console.log(req);
        //    return req.url.split('=')[1]
        // })
        // axios.get('/kk/aas',{
        //     params:{
        //         id:3
        //     }
        // }).then(res=>{
        //     console.log(res);
        // })
    </script>
</body>

</html>